<template>
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <custom-navbar></custom-navbar>
    <scroll-view refresher-enabled
                 :refresher-triggered="isTriggered"
                 @refresherrefresh="onRefresherrefresh"
                 scroll-y class="scroll-view"
                 @scrolltolower="onScrollToLower">
      <page-skeleton v-if="isLoading"/>
      <template v-else>
        <!-- 首页轮播图 -->
        <XtxSwiper :list="bannerList"/>
        <!-- 分类面板 -->
        <category-panel :list="categoryList"></category-panel>
        <!-- 热门推荐 -->
        <hot-panel :list="hotList"></hot-panel>
        <!--  猜你喜欢-->
        <XtxGuess ref="guessRef"/>
      </template>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import PageSkeleton from "./comps/PageSkeleton.vue";
import HotPanel from './comps/HotPanel.vue'
import CategoryPanel from './comps/CategoryPanel.vue'
import CustomNavbar from './comps/CustomNavbar.vue'
import {ref} from 'vue'
import {homeBannerApi} from '@/services/home'
import {homeCategoryMutliApi} from '@/services/home'
import type {Category} from '@/types/home'
import {homeHotMutliApi} from '@/services/home'
import type {HotItem} from '@/types/home'
import {onLoad} from '@dcloudio/uni-app'
import type {Banner} from '@/types/home'
import type {XtxGuessInstance} from '@/types/componnets'

// 获取轮播图数据
const bannerList = ref<Banner[]>([])
const getbannerList = async () => {
  const res = await homeBannerApi()
  bannerList.value = res.result
}
// 获取前台分类数据
const categoryList = ref<Category[]>([])
const getcategoryList = async () => {
  const res = await homeCategoryMutliApi()
  categoryList.value = res.result
}
// 获取热门推荐数据
const hotList = ref<HotItem[]>([])
const gethotList = async () => {
  const res = await homeHotMutliApi()
  hotList.value = res.result
}
// 设置当前下拉刷新状态
const isTriggered = ref(false)
// 下拉刷新
const onRefresherrefresh = async () => {
  // 开始刷新loading
  isTriggered.value = true
  // 猜你喜欢重置数据
  guessRef.value.resetData()
  // 数组接收Promise对象 返回Promise
  await Promise.all([getbannerList(), getcategoryList(), gethotList(), guessRef.value.getMore()])
//   关闭动画
  isTriggered.value = false
}

// 猜你喜欢组件ref
const guessRef = ref<XtxGuessInstance>()
const onScrollToLower = () => {
  guessRef.value?.getMore()
}

//loading
const isLoading = ref(false)
// 页面加载
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getbannerList(), getcategoryList(), gethotList()])
  isLoading.value = false
})

</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}
</style>
